<template>
	<view class="container">
		<view class="coutdown" v-if="info.time_limit>0 && info.available===1">
			<u-divider bg-color="#efefef" border-color="#acacac">
				<view>领取剩余时间：<u-count-down :timestamp="info.time_limit" bg-color="#efefef" color="#d0160f"
						separator-color="#d0160f" separator="zh"></u-count-down>
				</view>
			</u-divider>
		</view>
		<view class="topbg" v-else></view>
		<view class="from">
			<view class="nickName">{{info.phone}}</view>
			<view class="label">送您一份礼品</view>
		</view>
		<view class="msg">{{info.msg}}</view>
		<view class="gitfItem">
			<view class="goodsCon">
				<view class="thumb">
					<image :src="info.thumb" class="thumbPic">
				</view>
				<view class="goodsMain">
					<view class="goodsInfo">
						<view class="goodsTitleWrap">
							<view class="goodsTitle">{{info.goods_name}}</view>
							<view class="goodsPrice">￥{{info.price}}</view>
						</view>
						<view class="specWrap">
							<view class="buyNum">x1</view>
						</view>
					</view>
				</view>
			</view>
			<view class="orderFooter">
				<view class="left"></view>
				<view class="totalNum">共<text class="num">1</text>件商品</view>
				<view class="amount">金额：<text>￥{{info.price}}</text></view>
			</view>
		</view>

		<view v-if="info.time_limit>0 && info.available===1">
			<view class="hd">完善收货地址即可领取</view>
			<view class="address">
				<view class="formItem">
					<u-input v-model="name" placeholder="请输入收货人姓名" :type="type" :border="border" />
				</view>
				<view class="formItem">
					<u-input v-model="phone" placeholder="请输入手机号" :type="type" :border="border" />
				</view>
				<view class="formItem">
					<u-input v-model="area" @click="showRegionPicker" :disabled="true" placeholder="所在省/市/区"
						:type="type" :border="border" />
				</view>
				<view class="formItem">
					<u-input v-model="address" placeholder="请填写详细地址" :type="type" :border="border" />
				</view>
			</view>
			<view class="submit" @click="receive">立即领取</view>
			<view class="tip"><text class="star">*</text>您的信息平台将会为您严格保密，请放心填写。赶快领取吧！</view>
		</view>
		<view v-else>
			<view class="icon">
				<u-icon name="error-circle" color="#d0160f" size="90"></u-icon>
			</view>
			<view class="timeout" v-if="info.available===1">抱歉，领取时间结束</view>
			<view class="timeout" v-else-if="info.available===0">礼物已领取</view>
			<view class="timeout" v-else>礼物已被领取完</view>
		</view>
		<u-picker mode="region" ref="uPicker" v-model="show" @cancel="cancel" @confirm="confirm" />
		<login-model ref="loginModel" :is-back="1"></login-model>
	</view>
</template>

<script>
	import {
		giftInfo,
		receiveGift
	} from "@/common/api.js";
	import loginModel from "@/components/public/loginModel.vue";
	export default {
		components: {
			loginModel
		},
		data() {
			return {
				info: {},
				show: false,
				toBack: 0,
				gift_no: '',
				name: "",
				phone: "",
				area: '',
				province_id: 0,
				province: "",
				city_id: 0,
				city: "",
				district_id: 0,
				district: "",
				address: "",
				spread_code: ''
			}
		},
		onLoad(option) {
			this.gift_no = option.gift_no
			this.toBack = parseInt(option.toBack)
			let spread_code = option.spread_code
			if(spread_code){
				this.spread_code = spread_code
				uni.setStorageSync('spread_code', spread_code);
			}
		},
		onShow() {
			this.getInfo(this.gift_no)
		},
		onShareAppMessage(res) {
			let gift_no = this.gift_no
			let app = this
			let title = this.info.msg || '分享'
			return {
				title: title,
				path: `/goods/gift?gift_no=${gift_no}`,
				imageUrl: "https://yunxingzhan.oss-cn-hangzhou.aliyuncs.com/1.jpg",
				success(res) {},
				fail(res) {}
			}
		},
		methods: {
			getInfo(gift_no) {
				giftInfo(this, {
					gift_no: gift_no
				})
			},
			showRegionPicker() {
				this.show = true;
			},
			cancel() {
				this.show = false;
			},
			confirm(res) {
				this.area = res.province.label + '/' + res.city.label + '/' + res.area.label
				this.province_id = res.province.value
				this.province = res.province.label
				this.city_id = res.city.value
				this.city = res.city.label
				this.district_id = res.area.value
				this.district = res.area.label
			},
			receive() {
				receiveGift(this, {
					gift_no: this.gift_no,
					name: this.name,
					phone: this.phone,
					province_id: this.province_id,
					province: this.province,
					city_id: this.city_id,
					city: this.city,
					district_id: this.district_id,
					district: this.district,
					address: this.address
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.topbg {
		height: 30rpx;
		background-color: #efefef;
		;
	}

	.coutdown {
		height: 90rpx;
		line-height: 90rpx;
		text-align: center;
		background-color: #efefef;
		padding: 10rpx 50rpx;
	}

	.timelimit {
		color: red;
	}

	.from {
		background-color: #f7f7f7;
		display: flex;
		height: 70rpx;
		align-items: center;
		font-size: 24rpx;

		.nickName {
			color: #333;
			margin-right: 15rpx;
			margin-left: 50rpx;
		}

		.label {
			color: #666;
		}
	}

	.msg {
		background-color: #fee5e0;
		border: 1rpx solid #d0160f;
		border-radius: 10rpx;
		display: inline-block;
		margin-left: 50rpx;
		color: #d0160f;
		padding: 3rpx 5rpx;
		font-size: 24rpx;
	}

	.goodsCon {
		padding: 25rpx 25rpx 20rpx 25rpx;
		display: flex;
	}

	.goodsMain {
		flex: 1;
		margin-left: 25rpx;

		.goodsInfo {
			padding-bottom: 10rpx;
			border-bottom: 1px solid #f7f7f7;

			.goodsTitleWrap {
				color: #333;
				font-size: 28rpx;
				display: flex;
				height: 40rpx;
				line-height: 40rpx;

				.goodsTitle {
					flex: 1;
				}
			}

			.specWrap {
				display: flex;
				color: #999;
				font-size: 24rpx;
				margin-top: 20rpx;
				height: 40rpx;
				line-height: 40rpx;

				.buyNum {
					flex: 1;
					text-align: right;
				}
			}
		}
	}

	.thumbPic {
		width: 110rpx;
		height: 110rpx;
	}

	.orderFooter {
		padding: 20rpx;
		display: flex;
		border-bottom: 30rpx solid #efefef;

		.left {
			flex: 1;
		}

		.totalNum {
			margin-right: 20rpx;

			.num {
				color: red;
			}
		}

		.amount {
			text {
				font-weight: bold;
			}
		}
	}

	.hd {
		background-color: #f7f7f7;
		height: 70rpx;
		line-height: 70rpx;
		padding: 0 20rpx;
		color: #000;
		font-size: 26rpx;
	}

	.formItem {
		border-bottom: 1rpx solid #f5f5f5;
		margin: 0 25rpx;
		padding: 8rpx 15rpx;
	}

	.submit {
		background-color: #20cbd4;
		height: 80rpx;
		line-height: 80rpx;
		color: #ffffff;
		width: 700rpx;
		margin: 40rpx auto;
		border-radius: 10rpx;
		text-align: center;
	}

	.tip {
		color: #111111;
		font-size: 26rpx;
		line-height: 36rpx;
		padding: 25rpx;

		.star {
			color: #d0160f;
			font-weight: bold;
		}
	}

	.icon {
		text-align: center;
		margin-top: 60rpx;
	}

	.timeout {
		font-size: 40rpx;
		text-align: center;
		margin-top: 30rpx;
		font-weight: bold;
	}
</style>
